<template>
<br />
  <z-form
    :model="formState"
    name="basic"
    ref="basicForm"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <z-form-item
      label="Top coders"
      name="coders"
      :rules="[{ required: true, validator: checkMention }]"
    >
      <z-mentions v-model:value="formState.coders" rows="1">
        <z-mentions-option value="afc163">afc163</z-mentions-option>
        <z-mentions-option value="zombieJ">zombieJ</z-mentions-option>
        <z-mentions-option value="yesmeck">yesmeck</z-mentions-option>
      </z-mentions>
    </z-form-item>

    <z-form-item
      label="Bio"
      name="bio"
      :rules="[{ required: true, message: 'Must input bio!' }]"
    >
      <z-mentions
        v-model:value="formState.bio"
        rows="3"
        placeholder="You can use @ to ref user here"
      >
        <z-mentions-option value="afc163">afc163</z-mentions-option>
        <z-mentions-option value="zombieJ">zombieJ</z-mentions-option>
        <z-mentions-option value="yesmeck">yesmeck</z-mentions-option>
      </z-mentions>
    </z-form-item>

    <z-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <z-button type="primary" html-type="submit">Submit</z-button>
      <z-button style="margin-left: 10px" @click="resetForm">Reset</z-button>
    </z-form-item>
  </z-form>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';
import { Mentions } from 'ant-design-vue';
const {
  getMentions,
} = Mentions;
export default defineComponent({
  setup() {
    const checkMention = async (rule, value) => {
      const val = getMentions(value);
      if (val.length < 2) {
        return Promise.reject('More than one must be selected!');
      } else {
        return Promise.resolve();
      }
    };
    const basicForm = ref()
    const formState = reactive({
      coders: '',
      bio: ''
    });
    const onFinish = (values) => {
      console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo);
    };
    const resetForm = () => {
      basicForm.value.resetFields()
    }

    return {
      checkMention,
      formState,
      basicForm,
      onFinish,
      resetForm,
      onFinishFailed
    };
  },
});
</script>
